<template>
  <div class="footer">
    <div :class="{isActive:currentIndex==1}" @click="routerGo(1)">当天</div>
    <div :class="{isActive:currentIndex==2}" @click="routerGo(2)">近期</div>
    <div :class="{isActive:currentIndex==3}" @click="routerGo(3)">当年</div>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { reactive, toRefs, watch } from "vue";
export default {
  name: "FooterPage",
  setup() {
    const data = reactive({
      currentIndex: 1,
    });
    const router = useRouter();
 
    const routerGo = (num) => {
      switch (num) {
        case 1:
          data.currentIndex = 1;
          router.push("/");
          break;
        case 2:
          data.currentIndex = 2;
          router.push("/month");
          break;
        case 3:
          data.currentIndex = 3;
          router.push("/year");
          break;
        default:
          data.currentIndex = 1;
          router.push("/");
      }
    };
    return { ...toRefs(data), routerGo };
  }
};
</script>
<style lang="scss" scoped>
.footer {
  background: #fff;
  display: flex;
  justify-content: space-evenly;
  div {
    line-height: 50px;
    cursor: pointer;
    &.isActive {
      color: #e6a23c;
    }
  }
}
</style>